<template>
	<div class="gx_main">
		<div class="btn_save"><el-button type="primary" @click="saveInfo">确定</el-button></div>
		<el-form :model="formInline" label-width="140px">
			<el-row>
				<el-col :span="8">
					<el-form-item label="产品编码">
						<el-input v-model="formInline.material_code" placeholder="请选择产品编码" suffix-icon="el-icon-arrow-down" readonly  @focus="openSearch('cp')"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="产品名称">
						<el-input v-model="formInline.material_name" readonly></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="产品图号">
						<el-input v-model="formInline.draw_num" readonly></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="工艺编码">
						<el-input v-model="formInline.roution_code" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="版本号">
						<el-input v-model="formInline.version" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="默认工艺路线">
						<el-radio-group v-model="formInline.default_routing">
							<el-radio v-for="item in labelOp" :label="item.value" :value="item.value">{{item.label}}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<!-- <el-col :span="8">
					<el-form-item label="从工艺复制">
						<el-radio-group v-model="formInline.segment1">
							<el-radio v-for="item in labelOp" :label="item.value" :value="item.value">{{item.label}}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col> -->
				<el-col :span="8">
					<el-form-item label="是否按工艺路线报工">
						<el-radio-group v-model="formInline.need_report_by_index">
							<el-radio v-for="item in labelOp" :label="item.value" :value="item.value">{{item.label}}
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>			
			<el-row>
				<el-col :span="16">
					<el-form-item label="备注">
						<el-input type="textarea" v-model="formInline.remark" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="form_item">
			<div>工序列表</div>
			<div>
				<div class="flowchart">
					<div class="flowchart_row" v-for="(item,index) in fcList">
						<div class="flowchart_step" v-for="(it,idx) in item" @click="openAdd(it.index)">
							{{ it.op_desc }}
							<div class="delete" @click.stop="delGx(it.index)">-</div>
							<div class="add" @click.stop="addGx(it.index)">+</div>
							<div class="arrow" v-if="(index%2==0&&idx!=(item.length-1))||(index%2!=0&&idx!=0)" :style="{background:`url(${componentContent.imageMap['arrow']}) no-repeat center`,'background-size':'100%'}"></div>
						</div>
						<div class="broken_line" v-if="index!=0" :style="{background:`url(${componentContent.imageMap['arrow-left']}) no-repeat left ${index%2==0?'top':'bottom'}`,'background-size':'20px'}">
							<div class="line"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-table :data="fcData" stripe style="width: 100%;">
			<el-table-column v-for="{prop,label,width} in colData" :prop="prop" :label="label" :width="width">
				<template #default="scope">
					<div v-if="prop=='sop_file_url'">
						<div class="iframe_box">
							<div class="i_mask"  @click="openPdf(scope.row.pdfSrc)"></div>
							<iframe class="iframe" :src="scope.row.pdfSrc"></iframe>
						</div>
						<div style="line-height: 14px;margin:10px 0;">{{scope.row.pdfName}}</div>
					</div>
                    <span v-else-if="prop=='need_report'"> {{ scope.row[prop] == "1" ? "是" : "否" }}</span>
					<span v-else>{{scope.row[prop]}}</span>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="工序详情" :visible.sync="showAdd" width="60%" top="2%" :append-to-body="true">
			<div class="dialog_main">
				<el-form :model="currForm" label-width="120px">
					<el-row>
						<el-col :span="12">
							<el-form-item label="工序编码">
								<el-input v-model="currForm.op_code" placeholder="请选择工序编码" suffix-icon="el-icon-arrow-down" readonly @focus="openSearch('gx')"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="工序名称">
								<el-input v-model="currForm.op_desc" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<!-- <el-col :span="12"> -->
							<!-- <el-form-item label="工作中心">
								<el-input v-model="currForm.work_centre_name" placeholder="请选择工作中心" suffix-icon="el-icon-arrow-down" readonly @focus="handleWork" @blur="visible=false"></el-input>
								<el-popover ref="popover" v-model="visible" placement="bottom-start" width="300"
									trigger="click">
									<el-tree :data="data" default-expand-all :props="defaultProps" ref="tree" node-key="id"
										:highlight-current="true" :filterable="true" :expand-on-click-node="false"
										@node-click="handleNodeClick">
									</el-tree>
								</el-popover>
							</el-form-item> -->
							<!-- <el-form-item label="产线编码">
								<el-select v-model="currForm.line_code" @change="lineChange">
									<el-option v-for="item in productLine" :label="item.pl_code" :value="item.pl_code">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="产线名称">
								<el-input v-model="currForm.line_name" readonly></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="12">
							<el-form-item label="工位编码">
                                <el-input v-model="currForm.gw_code" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="工位名称">
								<el-input v-model="currForm.gw_name" readonly></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<!-- <el-col :span="8">
							<el-form-item label="质检方案">
								<el-input v-model="currForm.quality_inspection_name" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="8">
							<el-form-item label="是否需要报工">
								<el-radio-group v-model="currForm.need_report">
									<el-radio v-for="item in labelOp" :label="item.value" :value="item.value">{{item.label}}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="作业指导书">
								<div v-if="currForm.pdfSrc" style="width:50px;height:50px;">
									<div class="iframe_box">
										<div class="i_mask" @click="openPdf(currForm.pdfSrc)"></div>
										<iframe class="iframe" :src="currForm.pdfSrc" @click="openPdf(currForm.pdfSrc)"></iframe>
									</div>
								</div>
								<el-upload  action="/api/file/Uploader/annex"  :headers="customHeaders"  :on-success="handleSuccess" :multiple="false" :limit="1" :show-file-list="false">								
								<div v-if="currForm.pdfSrc">{{currForm.pdfName}}</div>
								<el-button v-else size="small">点击上传</el-button>
								</el-upload>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="是否外协">
								<el-radio-group v-model="currForm.is_outsource_inspect">
									<el-radio v-for="item in labelOp" :label="item.value" :value="item.value">{{item.label}}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="8">
							<el-form-item label="触发首检">
								<el-radio-group v-model="currForm.is_first_inspect">
									<el-radio v-for="item in labelOp" :label="item.value" :value="item.value">{{item.label}}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="触发巡检">
								<el-radio-group v-model="currForm.is_patrol_inspect">
									<el-radio v-for="item in labelOp" :label="item.value" :value="item.value">{{item.label}}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col> -->
						<el-col :span="8">
							<el-form-item label="触发末检">
								<el-radio-group v-model="currForm.is_final_inspect">
									<el-radio v-for="item in labelOp" :label="item.value" :value="item.value">{{item.label}}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="24">
							<el-form-item label="备注">
								<el-input type="textarea" v-model="currForm.remark" placeholder="请输入"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-collapse v-model="activeNames">
					<el-collapse-item title="工装工具" name="1">
						<el-table :data="gzgjData" stripe style="width: 100%"
							:header-cell-style="{background:'#f5f7fa'}" @cell-mouse-enter="cellMouseEnter"
							@cell-mouse-leave="cellMouseLeave">
							<el-table-column v-for="{prop,label,type,width} in gzgjCol" :prop="prop" :label="label"
								:width="width">
								<template #default="scope">
									<div v-if="type=='xh'">
										<i v-if="scope.$index===currIndex" @click="deleteGzgj(scope.$index)" class="el-icon-delete"></i>
										<span v-else>{{  scope.$index+1}}</span>
									</div>
									<el-input  v-else-if="type=='select'" v-model="scope.row[prop]" placeholder="请选择" suffix-icon="el-icon-arrow-down" readonly @focus="openSearch('gzgj',scope.$index)"></el-input>
									<span v-else>{{scope.row[prop]}}</span>
								</template>
							</el-table-column>
						</el-table>
						<div class="t_add" @click="addGzgj"><i class="el-icon-plus"></i>添加</div>
					</el-collapse-item>
					<el-collapse-item title="加工设备" name="2">
						<el-table :data="jgsbData" stripe style="width: 100%"
							:header-cell-style="{background:'#f5f7fa'}" @cell-mouse-enter="cellMouseEnter1"
							@cell-mouse-leave="cellMouseLeave1">
							<el-table-column v-for="{prop,label,type,width} in jgsbCol" :prop="prop" :label="label"
								:width="width">
								<template #default="scope">
									<div v-if="type=='xh'">
										<i v-if="scope.$index===currIndex1" @click="deleteJgsb(scope.$index)" class="el-icon-delete"></i>
										<span v-else>{{  scope.$index+1}}</span>
									</div>
									<el-input v-else-if="type=='select'" v-model="scope.row[prop]" placeholder="请选择" suffix-icon="el-icon-arrow-down"
										readonly @focus="openSearch('jgsb',scope.$index)"></el-input>
									<span v-else>{{scope.row[prop]}}</span>
								</template>
							</el-table-column>
						</el-table>
						<div class="t_add" @click="addJgsb"><i class="el-icon-plus"></i>添加</div>
					</el-collapse-item>
					<el-collapse-item title="生产节拍" name="3">
						<el-form :model="currForm" label-width="130px">
							<el-row>
								<el-col :span="6">
									<el-form-item label="标准工时">
										<el-input-number style="width: 100%;" v-model="currForm.work_time"
											:controls="false"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="工时单位">
										<el-select v-model="currForm.work_time_unit">
											<el-option v-for="item in optionUnit" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="准备工时">
										<el-input-number style="width: 100%;" v-model="currForm.before_time"
											:controls="false"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="准备工时单位">
										<el-select v-model="currForm.before_time_unit">
											<el-option v-for="item in optionUnit" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="6">
									<el-form-item label="后置工时">
										<el-input-number style="width: 100%;" v-model="currForm.after_time"
											:controls="false"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="后置工时单位">
										<el-select v-model="currForm.after_time_unit">
											<el-option v-for="item in optionUnit" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="单件工时">
										<el-input-number style="width: 100%;" v-model="currForm.per_work_time"
											:controls="false"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="单件工时单位">
										<el-select v-model="currForm.per_work_time_unit">
											<el-option v-for="item in optionUnit" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="6">
									<el-form-item label="计件工资(元)">
										<el-input-number style="width: 100%;" v-model="currForm.work_price"
											:controls="false"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="单价工价(元/小时)">
										<el-input-number style="width: 100%;" v-model="currForm.per_work_price"
											:controls="false"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="附加工价">
										<el-input-number style="width: 100%;" v-model="currForm.additional_price"
											:controls="false"></el-input-number>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="附加工时">
										<el-input-number style="width: 100%;" v-model="currForm.additional_time"
											:controls="false"></el-input-number>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row>
								<el-col :span="6">
									<el-form-item label="附加工时单位">
										<el-select v-model="currForm.additional_time_unit">
											<el-option v-for="item in optionUnit" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="是否乘以数量">
										<el-select v-model="currForm.is_multiply_amout">
											<el-option v-for="item in labelOp" :label="item.label" :value="item.value">
											</el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="计算方式">
										<el-select v-model="currForm.calculate_type">
											<el-option label="按件" :value="1"></el-option>
											<el-option label="按重量" :value="2"></el-option>
										</el-select>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="备注">
										<el-input type="textarea" v-model="currForm.beat_remark" placeholder="请输入"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-collapse-item>
				</el-collapse>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showAdd = false">取 消</el-button>
				<el-button type="primary" @click="saveAdd">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="选择数据" :visible.sync="showSearch" width="40%" top="2%" :append-to-body="true">
			<div><span>关键词</span>
				<el-input style="margin: 0 30px 0 10px;width: 200px;" v-model="keyWord" placeholder="请输入关键字"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="getSeachList">查询</el-button>
				<el-button icon="el-icon-refresh-right" @click="keyWord=''">重置</el-button>
			</div>
			<el-table :data="searchData" stripe style="width: 100%;margin-top:20px;" height="500" highlight-current-row
				@current-change="handleCurrentChange">
				<el-table-column v-for="{prop,label,width} in searchCol" :prop="prop" :label="label" :width="width">
					<template #default="scope">
						<div v-if="prop=='radio_'">
							<el-radio :label="(scope.$index+1)" v-model="radio">&nbsp;</el-radio>
						</div>
						<div v-else-if="prop=='no_'"> {{ scope.$index+1 }}</div>
						<div v-else>{{ scope.row[prop] }}</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="text-align: right;">
				<el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="pageIndex"
					:page-sizes="[20, 50, 100, 500]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
					:total="totalPage">
				</el-pagination>
			</div>
			<span slot="footer" class="dialog-footer">
		        <el-button @click="showSearch = false">取 消</el-button>
		        <el-button type="primary" @click="confirmSelect">确 定</el-button>
		      </span>
		</el-dialog>
		<el-dialog title="" :visible.sync="showPdf" width="100%" top="0" :append-to-body="true">
			<iframe style="width:100%;height:800px;border:none;" :src="currentPdf"></iframe>
		</el-dialog>
	</div>
</template>

<script>
	export default {
	props: {value: String},
  data() {
    return {
		componentContent,
      gzgjCol: [
        { label: '序号', prop: 'no', type: 'xh', width: '50' },
        { label: '工装工具名称', prop: 'material_name', type: 'select' },
        { label: '工装工具编号', prop: 'material_code' },
        { label: '工装工具类型', prop: 'material_type' },
        // { label: '所属部门', prop: 'dept_name' },
        // { label: '工具名称', prop: 'tool_name' },
      ],
      jgsbCol: [
        { label: '序号', prop: 'no', type: 'xh', width: '50' },
        // { label: '设备名称', prop: 'biz_id', type: 'select' },
        { label: '设备名称', prop: 'item_name', type: 'select' },
        { label: '设备编码', prop: 'item_code' },
        { label: '设备类型', prop: 'model_desc' },
        { label: '使用车间', prop: 'ws_desc' }
      ],
      formInline: {},
      labelOp: [
        { value: "0", label: '否' },
        { value: "1", label: '是' },
      ],
      fcData: [
        {
        //   is_outsource_inspect: '',
        //   is_final_inspect: '',
          process_code: '',
          process_name: '',
          index_no: '',
          work_centre_name: '',
          quality_inspection_name: '',
          sop_file_url: '',
          remark: '',
          index: 0
        }
      ],
      colData: [
        { label: '工序编码', prop: 'op_code', width: '100' },
        { label: '工序名称', prop: 'op_desc', width: '180' },
        { label: '顺序号', prop: 'index_no', width: '100' },
        // { label: '工作中心', prop: 'work_centre_name', width: '180' },
        { label: '工位', prop: 'gw_name', width: '180' },
        // { label: '质检方案', prop: 'quality_inspection_name', width: '180' },
        { label: '是否需要报工', prop: 'need_report', width: '180' },
        { label: '作业指导书', prop: 'sop_file_url', width: '180' },
        { label: '备注', prop: 'remark' },
      ],
      showAdd: false,
      currForm: {},
      data: [
        { id: 1, label: '一级 1', children: [{ id: 4, label: '二级 1-1' }] },
        { id: 2, label: '一级 2', children: [{ id: 5, label: '二级 2-1' }] },
        { id: 3, label: '一级 3', children: [{ id: 6, label: '二级 3-1' }] }
      ],
      defaultProps: {
        children: 'children',
        label: 'f_fullname'
      },
      visible: false,
      activeNames: ['1','2'],
      currIndex: '',
      currIndex1: '',
      optionUnit: ['秒', '分钟', '小时', '天'],
      showSearch: false,
      searchCol: [],
      searchData: [],
      currentRow: {},
      radio: '',
      pageSize: 20,
      pageIndex: 1,
      totalPage: 0,
	  keyWord:'',
	  searchUrl:'',
	  currSearch:'',
	  searchIndex:'',
	  customHeaders:{Authorization:this.$store.getters.token},
	  currentPdf:'',
	  showPdf:false,
	  currGxIdx:'',
	  gzgjData:[],
	  jgsbData:[],
	  productLine:[]
    };
  },
  computed: {
    fcList() {
      return this.chunkArray(this.fcData, 6)
    },
  },
  methods: {
    requestCode() {
      return this.WitGlobal.requestCode(...arguments);
    },
    openSearch(type,index=0) {
		this.pageSize= 20;
		this.pageIndex= 1;
		this.totalPage= 0;
		this.keyWord='';
		this.currSearch=type;
		this.searchIndex=index;
		this.currentRow={};
		if(type=='cp'){
			this.searchCol=[
				{ label: '', prop: 'radio_', width: 50 },
				{ label: '序号', prop: 'no_', width: 50 },
				{ label: '物料代码', prop: 'material_code' },
				{ label: '物料名称', prop: 'material_name' },
				{ label: '物料分类', prop: 'material_classification' },
				{ label: '产品型号', prop: 'material_model' }
			];
		}else if(type=='gx'){
			this.searchCol=[
				{ label: '', prop: 'radio_', width: 50 },
				{ label: '序号', prop: 'no_', width: 50 },
				{ label: '工序代码', prop: 'op_code' },
				{ label: '工序描述', prop: 'op_desc' },
				{ label: '收集方式', prop: 'op_method' }
			];
		}else if(type=='gzgj'){
			this.searchCol=[
			{ label: '', prop: 'radio_', width: 50 },
			{ label: '序号', prop: 'no_', width: 50 },
			{ label: '工装编号', prop: 'material_code' },
			{ label: '工装名称', prop: 'material_name' },
			{ label: '工装类型', prop: 'material_type' },
			{ label: '工装分类', prop: 'material_classification' }
			];
		}else if(type=='jgsb'){
			this.searchCol=[
			{ label: '', prop: 'radio_', width: 50 },
			{ label: '序号', prop: 'no_', width: 50 },
			{ label: '设备编码', prop: 'item_code' },
			{ label: '设备名称', prop: 'item_name' },
			{ label: '设备型号', prop: 'model_desc' },
			{ label: '固定资产编号', prop: 'fixed_assets_number' }
			];
		}
		this.getSeachList();
      	this.showSearch = true;
    },
	// 获取弹窗查询数据
	getSeachList(){
		if(this.currSearch=='cp'){			
			this.searchUrl="lljxx.MES.craft.db.gylx.getMaterialInfo";
		}else if(this.currSearch=='gx'){
			this.searchUrl="lljxx.MES.craft.db.gylx.getProcessStandards";
		}else if(this.currSearch=='gzgj'){
			this.searchUrl="lljxx.MES.craft.db.gylx.getMaterialInfo";
		}else if(this.currSearch=='jgsb'){
			this.searchUrl="lljxx.MES.craft.db.gylx.getDeviceInfo";
		}
		this.requestCode(this.searchUrl,{'pageSize': this.pageSize, 'pageNum': this.pageIndex,'keyword':this.keyWord}).then(res=>{
			if(res.code==200){
				this.searchData=res.data.list;
				if(this.currSearch=='gzgj'){
					this.searchData.forEach(item=>{
						let text='';
						if(item.material_type==1){
							text='虚拟品';
						}else if(item.material_type==2){
							text='范本';
						}else if(item.material_type==3){
							text='材料/零件/商品';
						}else if(item.material_type==4){
							text='事务用品';
						}else if(item.material_type==5){
							text='费用/软件';
						}else if(item.material_type==6){
							text='组合/加工品';
						}
						item.material_type=text;
					})
				}
				this.totalPage=res.data.total;
			}
		})
	},
    chunkArray(array, chunkSize) {
      let result = [];
      for (let i = 0; i < array.length; i += chunkSize) {
        result.push(array.slice(i, i + chunkSize));
      }
      return result;
    },
    addGx(index) {
		let idx=this.fcData.findIndex(i=>!i.op_desc);
		if(idx>-1){
			this.$message.error("请填写完成后继续添加！");
			return;
		}
      this.fcData.splice(index + 1, 0, { name: '' });
      this.fcData.forEach((item, idx) => {
        item.index = idx;
		item.index_no=(idx+1);
      })
    },
    delGx(index) {
      if (this.fcData.length == 1) {
        return;
      }
      this.fcData.splice(index, 1);
      this.fcData.forEach((item, idx) => {
        item.index = idx;
		item.index_no=(idx+1);
      })
    },
    handleWork() {
      this.visible = true;
    },
    handleNodeClick(data) {
	  this.currForm.work_centre_id = data.id;
      this.currForm.work_centre_name = data.f_fullname;
      this.visible = false;
    },    
    openAdd(index) {
	 	this.showAdd = true;
		this.currGxIdx=index;
		this.currForm = this.fcData[index];
		// this.currForm.is_first_inspect=this.currForm.is_first_inspect||0;
		// this.currForm.is_patrol_inspect=this.currForm.is_patrol_inspect||0;
		// this.currForm.is_outsource_inspect=this.currForm.is_outsource_inspect||"0";
		// this.currForm.is_final_inspect=this.currForm.is_final_inspect||"0";
		this.gzgjData=this.currForm.gzgjData||[];
		this.jgsbData=this.currForm.jgsbData||[];
    },
    saveAdd(){
	  this.currForm.gzgjData=this.gzgjData;
	  this.currForm.jgsbData=this.jgsbData;
      this.fcData[this.currGxIdx]=this.currForm;
	  this.showAdd=false;
    },
    cellMouseEnter(row) {
      this.currIndex = row.index;
    },
    cellMouseLeave() {
      this.currIndex = '';
    },
    cellMouseEnter1(row) {
      this.currIndex1 = row.index;
    },
    cellMouseLeave1() {
      this.currIndex1 = '';
    },
    handleCurrentChange(row) {
      let index = this.searchData.findIndex(i => i.f_id == row.f_id);
      this.radio = index + 1;
      this.currentRow = row;
    },
    handleSizeChange(val) {
		this.pageSize=val;
      this.getSeachList();
    },
    handlePageChange(val) {
		this.pageIndex=val;
		this.getSeachList();
    },
	handleSuccess(res) {
		this.currForm.pdfSrc='';
		if(res.code==200){
			let rest=res.data;
			rest.name=this.currForm.op_desc+'.'+rest.name.split('.')[1];
			this.currForm.pdfName=rest.name;
			this.currForm.pdfSrc=rest.url;
			this.currForm.sop_file_url=JSON.stringify([rest]);
		}
	},
	openPdf(url){
		this.showPdf=true;
		this.currentPdf=url;
	},
	// 添加工装工具
	addGzgj(){
		let idx=this.gzgjData.findIndex(i=>!i.material_code);
		if(idx>-1){
			this.$message.error("请填写完成后继续添加！");
			return;
		}
		this.gzgjData.push({index:this.gzgjData.length});
	},
	// 添加加工设备
	addJgsb(){
		let idx=this.jgsbData.findIndex(i=>!i.item_code);
		if(idx>-1){
			this.$message.error("请填写完成后继续添加！");
			return;
		}
		this.jgsbData.push({index:this.jgsbData.length});
	},
	deleteGzgj(index){
		this.gzgjData.splice(index,1);
	},
	deleteJgsb(index){
		this.jgsbData.splice(index,1);
	},
	// 确认选中
	confirmSelect(){
        this.requestCode("lljxx.MES.craft.db.gylx.getFrockFromPro",{gxdm:this.currentRow.op_code}).then(res=>{
            if(res.code==200){
                if(res.data[0]){
                    this.currForm.gw_code=res.data[0].station_code||"";
                    this.currForm.gw_name=res.data[0].station_name||"";
                } else {
                    this.currForm.gw_code="";
                    this.currForm.gw_name="";
                }
                if(this.currentRow.f_id){
                    if(this.currSearch=='cp'){			
                        this.formInline.material_code=this.currentRow.material_code;
                        this.formInline.product_code=this.currentRow.f_id;
                        this.formInline.material_name=this.currentRow.material_name;
                        this.formInline.draw_num=this.currentRow.draw_num;
                    }else if(this.currSearch=='gx'){
                        this.currForm.op_code=this.currentRow.op_code;
                        this.currForm.process_code=this.currentRow.f_id;
                        this.currForm.op_desc=this.currentRow.op_desc;
                    }else if(this.currSearch=='gzgj'){
                        this.gzgjData[this.searchIndex].tool_info_id=this.currentRow.f_id;
                        this.gzgjData[this.searchIndex].material_code=this.currentRow.material_code;
                        this.gzgjData[this.searchIndex].material_name=this.currentRow.material_name;
                        this.gzgjData[this.searchIndex].material_type=this.currentRow.material_type;
                    }else if(this.currSearch=='jgsb'){
                        this.jgsbData[this.searchIndex].biz_id=this.currentRow.f_id;
                        this.jgsbData[this.searchIndex].item_name=this.currentRow.item_name;
                        this.jgsbData[this.searchIndex].item_code=this.currentRow.item_code;
                        this.jgsbData[this.searchIndex].model_desc=this.currentRow.model_desc;
                        this.jgsbData[this.searchIndex].ws_desc=this.currentRow.ws_desc;
                    }
                    this.showSearch=false;
                }
            }
        });
		
	},
	// 产线改变
	lineChange(e){
		let obj=this.productLine.find(i=>i.pl_code==e);
		this.currForm.line_name=obj.pl_desc;
	},
	// 获取工艺路线和工序列表
	getProcessRoute(){
		if(this.value&&this.value.f_id){
			this.requestCode("lljxx.MES.craft.db.gylx.getProcessRoute",{id:this.value.f_id}).then(res=>{
				if(res.code==200){
					this.formInline=res.data[0];
				}
			});
			this.requestCode("lljxx.MES.craft.db.gylx.getTool",{roution_id:this.value.f_id}).then(res1=>{
				if(res1.code==200){
					this.requestCode("lljxx.MES.craft.db.gylx.getDevice",{roution_id:this.value.f_id}).then(res2=>{
						if(res2.code==200){
							this.requestCode("lljxx.MES.craft.db.gylx.getProductionProcesses",{id:this.value.f_id}).then(res=>{
								if(res.code==200){
									let data1=res1.data.map((item,index)=>{
										item.index=index
										return item;
									});
									let data2=res2.data.map((item,index)=>{
										item.index=index
										return item;
									});
									this.fcData=res.data.map((item,index)=>{
										item.index=index;
										if(item.sop_file_url){
											let obj=JSON.parse(item.sop_file_url);						
											item.pdfName=obj[0].name;
											item.pdfSrc=obj[0].url;
										}
                                        item.need_report = item.need_report;
										item.gzgjData=data1.filter(i=>i.item_id==item.f_id)||[];
										item.jgsbData=data2.filter(i=>i.roution_item_id==item.f_id)||[];
										return item;
									});
								}
							})						 
						}
					});
				}
			});
			
		}
	},
	// 获取组织
	getOrganize(){
		this.requestCode("lljxx.MES.craft.db.gylx.getOrganize",{}).then(res=>{
			if(res.code==200){
				let renderTree=(data,pid)=>{
					let result=[];
					data.forEach(item=>{
						if(item.f_parentid==pid){
							let children=renderTree(data,item.f_id);
							if(children){
								item.children=children;
							}
							item.id=item.f_id;
							item.label=item.f_fullname;
							result.push(item);
						}
					});
					return result;
				}
				this.data=renderTree(res.data,'-1');
			}
		})
	},
	// 获取产线
	getProductLine(){
		this.requestCode("lljxx.MES.craft.db.gylx.getProductLine",{}).then(res=>{
			if(res.code==200){
				this.productLine=res.data;
			}
		})
	},
	// 保存
	saveInfo(){
		let gxList=this.fcData.map(item=>{
			let gzgjList=item.gzgjData.map(it=>{
				return {
					tool_info_id:it.tool_info_id,
					tool_code:it.material_code,
					tool_name:it.material_name,
					tool_type_name:it.material_type
				};
			});
			let gjsbList=item.jgsbData.map(it=>{
				return {
					biz_id:it.biz_id,
					biz_name:it.item_name
				};
			});
			return{
				process_code:item.process_code,
				process_name:item.op_desc,
				index_no:item.index_no,
				work_centre_id:item.work_centre_id,
				work_centre_name:item.work_centre_name,
				// quality_inspection_name:item.quality_inspection_name,
				need_report:item.need_report,
				sop_file_url:item.sop_file_url,
				remark:item.remark,
				work_time:item.work_time,
				work_time_unit:item.work_time_unit,
				before_time:item.before_time,
				before_time_unit:item.before_time_unit,
				after_time:item.after_time,
				after_time_unit:item.after_time_unit,
				work_price:item.work_price,
				per_work_time:item.per_work_time,
				per_work_time_unit:item.per_work_time_unit,
				per_work_price:item.per_work_price,
				additional_price:item.additional_price,
				additional_time:item.additional_time,
				additional_time_unit:item.additional_time_unit,
				is_multiply_amout:item.is_multiply_amout,
				calculate_type:item.calculate_type,
				beat_remark:item.beat_remark,
				// line_code:item.line_code,
				// line_name:item.line_name,
				gw_code:item.gw_code,
				gw_name:item.gw_name,
				// is_first_inspect:item.is_first_inspect,
				// is_patrol_inspect:item.is_patrol_inspect,
				is_outsource_inspect:item.is_outsource_inspect,
				is_final_inspect:item.is_final_inspect,
				gzgjList:gzgjList,
				gjsbList:gjsbList
			}
		})
		let param={
				f_id:this.formInline.f_id||'',
				product_code:this.formInline.product_code,
				product_name:this.formInline.material_name,
				product_fig_no:this.formInline.draw_num,
				roution_code:this.formInline.roution_code,
				version:this.formInline.version,
				default_routing:this.formInline.default_routing,
				// segment1:this.formInline.segment1,
				need_report_by_index:this.formInline.need_report_by_index,
				remark:this.formInline.remark,
				gxList:gxList
			}
		this.requestCode("lljxx.MES.craft.bz.gylx.insertRoutionInfo",param).then(res=>{
			if(res.code==200){
				this.$message.success("保存成功！");
			}
		})
	},
  }, mounted() {
	//   this.getOrganize();
	  this.getProductLine();
	  this.getProcessRoute();
  }
};
</script>

<style lang='scss' scoped>
	.gx_main {
		.btn_save{
			margin:10px;
			text-align:right;
		}
		.form_item {
			display: flex;
			flex-direction: row;
			margin-bottom:20px;

			&>div {
				&:first-child {
					width: 140px;
					text-align: right;
					padding-right: 15px;
					color: #666;
				}

				&:last-child {
					width: 1180px;
					border: 1px solid #dcdfe6;
					border-radius: 5px;
				}
			}

			.flowchart {
				padding-left: 50px;

				.flowchart_row {
					display: flex;
					align-items: center;
					position: relative;

					&:nth-child(odd) {
						flex-direction: row;

						.delete {
							right: -5px;
							top: 3px;
						}

						.add {
							right: -5px;
							bottom: 3px;
						}

						.broken_line {
							transform: rotate(180deg);
							left: -40px;
							background: url(./arrow-left.png) no-repeat left top;
							background-size: 20px;
							padding-left: 9px;
							padding-top: 9px;
						}
					}

					&:nth-child(even) {
						flex-direction: row-reverse;

						.delete {
							left: -6px;
							top: 3px;
						}

						.add {
							left: -5px;
							bottom: 3px;
						}

						.arrow {
							transform: rotate(180deg);
						}

						.broken_line {
							right: 20px;
							background: url(./arrow-left.png) no-repeat left bottom;
							background-size: 20px;
							padding-left: 9px;
							padding-bottom: 9px;
						}
					}

					.broken_line {
						position: absolute;
						top: -30px;

						.line {
							width: 35px;
							height: 58px;
							border: 2px solid #8a8a8a;
							border-left: none;
						}
					}
				}

				.flowchart_step {
					width: 100px;
					height: 35px;
					line-height:35px;
					margin: 10px;
					padding: 0 10px;
					/* border: 1px solid #dcdfe6; */
					border-radius: 5px;
					position: relative;
					margin-right: 80px;
					background-color:#409EFF;
					color:#ffffff;
					text-align:center;
					
					.delete {
						position: absolute;
						width: 10px;
						height: 10px;
						line-height: 7px;
						font-size: 18px;
						background-color: #f56c6c;
						color: #fff;
						border-radius: 50%;
						text-align: center;
						cursor: pointer;
					}

					.add {
						position: absolute;
						width: 10px;
						height: 10px;
						line-height: 10px;
						font-size: 15px;
						background-color: #67C23A;
						color: #fff;
						border-radius: 50%;
						text-align: center;
						cursor: pointer;
					}

					.arrow {
						width: 50px;
						height: 100%;
						background: url(./arrow.png) no-repeat center;
						background-size: 100%;
						position: absolute;
						right: -70px;
						top: 0px;
					}
				}
			}
		}

	}
</style>
<style lang="scss">
	.dialog_main {
		height: 600px;
		overflow-y: scroll;
		.t_add {
			width: 100%;
			height: 40px;
			text-align: center;
			color: #1677ff;
			line-height: 40px;
			border: 1px dashed #1677ff;
			margin-top: 10px;
			cursor: pointer;
		}
	}
	.iframe_box{
		width:50px;
		height:50px;
		position:relative;
		.i_mask{
			position: absolute;
			left: 0;
			top: 0;
			width:100%;
			height:100%;
			z-index:10;
		}
		.iframe{
			width:100%;
			height:100%;
			border:none;
		}
	}
</style>